<template>
  <div>
    <el-card>
      <!--操作区域 -->
      <el-row type="flex" justify="space-between">
        <div>
          <!--表单筛选 -->
          <el-form label-width="80px" :inline="true" size="normal">
            <el-form-item>
              <el-input
                v-model.trim="queryData.directory_name"
                placeholder="目录名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="归属学科" v-model="queryData.subject_id">
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.subject_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="显示状态" v-model="queryData.is_show">
                <el-option
                  v-for="item in enableState"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="searchOK"
                >搜索</el-button
              >
              <el-button size="small" @click="searchCancel">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button size="small" @click="$refs.Adddirectory.dialogShow = true"
            >创建目录</el-button
          >
        </div>
      </el-row>
      <br />
      <!--表格区域-->
      <el-table :data="list" border stripe>
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="id"
          label="目录ID"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="directory_name"
          label="目录名称"
          align="center"
        ></el-table-column>

        <el-table-column prop="directory_icon" label="目录图标" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.directory_icon === ''">暂无</span>
            <el-image
              v-else
              style="width: 100px; height: 100px"
              :src="changeImg(row.directory_icon)"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column
          prop="subject_name"
          label="归属学科"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="username"
          label="创建人"
          align="center"
        ></el-table-column>

        <el-table-column prop="is_show" label="是否显示" align="center">
          <template slot-scope="{ row }">
            <el-switch
              @click.native="changeswitch(row.id, row.is_show)"
              v-model="row.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="tag_num" label="标签数量" align="center">
          <template slot-scope="{ row }">
            <span v-if="!row.tag_num"> {{ row.tag_num }}</span>
            <span
              v-else
              :disabled="row.tag_num"
              :class="{ color: row.tag_num }"
              @click="toDirectory(row)"
              >{{ row.tag_num }}
              <i v-if="row.tag_num" class="el-icon-paperclip"></i
            ></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
              @click="editRow(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="delRow(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页区域 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="queryData.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
    </el-card>
    <!-- 新增弹框部分 -->
    <Adddirectory
      ref="Adddirectory"
      :subjectList="subjectList"
      @changeItem="initData"
    ></Adddirectory>
  </div>
</template>

<script>
// 导入枚举数据
import EmployeesEnum from "@/api/constan/common";
import {
  getdirectoryListApi,
  deldirectoryApi,
  getdirectoryApi,
  editdirectoryApi,
} from "@/api/directory";

import { getsubjectListApi, getsubjectApi } from "@/api/subject";
import Adddirectory from "@/views/subject/compoments/adddirectory.vue";
export default {
  name: "directory",
  components: {
    Adddirectory,
  },
  data() {
    return {
      enableState: EmployeesEnum.enableState, //显示隐藏枚举
      subjectList: [],
      list: [],
      queryData: {
        directory_name: "", //目录名称
        subject_id: "", //归属学科
        is_show: "", //是否显示状态 1:显示;2:不显示
        page: 1,
        limit: 10,
      },
      totalNum: 0, //数据总数
    };
  },
  created() {
    this.getSubjece();
   
    if (this.$route.query.id) {
      // this.queryData.subject_id = this.$route.query.id;
      // this.initData();
      this.getSubjece(this.$route.query.id)

    }
    this.initData();
  },
  methods: {
    // 初始化列表信息
    async initData() {
      const { list, total } = await getdirectoryListApi(this.queryData);
      console.log(list);
      this.list = list;
      this.totalNum = total;
    },
    // 获取归属学科
    async getSubjece(id) {
      if(id){
      const res = await getsubjectApi(id)
      this.queryData.subject_id =res.id
      this.initData()
      }else{
        const res = await getsubjectListApi({ page: 1, limit: 10000 });
      this.subjectList = res.list;
      }
    },
  

    // 处理列表图片问题
    changeImg(url) {
      return process.env.VUE_APP_BASE_IMG + url;
    },
    //搜索
    async searchOK() {
      console.log(this.queryData);
      //v-model 双向绑定了  共用一个接口 重新调用函数即可
      this.queryData.page = 1;
      this.initData();
      await this.$nextTick();
      this.queryData.directory_name = "";
      this.queryData.is_show = "";
    },
    //重置
    searchCancel() {
      this.queryData.page = 1;
      this.queryData = {
        directory_name: "", //目录名称
        subject_id: "", //归属学科
        is_show: "", //是否显示状态 1:显示;2:不显示
        page: 1,
        limit: 10,
      };

      this.initData();
    },
    // 分页区域
    sizeChange(val) {
      this.queryData.limit = val;
      this.initData();
    },
    currentChange(val) {
      this.queryData.page = val;
      this.initData();
    },
    // 删除功能
    async delRow(id) {
      try {
        await this.$confirm("确定要删除吗");
      } catch (error) {
        return console.log(error);
      }
      await deldirectoryApi(id);
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      this.$message.success("删除成功");
      this.initData();
    },
    // 切换部分
    async changeswitch(id, val) {
      // 切换时拿到当前对应的数据
      const data = await getdirectoryApi(id);
      data.is_show = val;
      await editdirectoryApi(data);
      this.initData();
      this.$message.success("更新成功");
    },
    //修改部分
    async editRow(id) {
      const data = await getdirectoryApi(id);
      console.log(data);
      this.$refs.Adddirectory.dialogShow = true;
      this.$refs.Adddirectory.formData = data;
      this.$refs.Adddirectory.fileList.push({
        name: "advimgsrc",
        url: process.env.VUE_APP_BASE_IMG + data.directory_icon,
      });
      this.$refs.Adddirectory.imgUrl =
        process.env.VUE_APP_BASE_IMG + data.directory_icon;
    },

    // 跳转
    toDirectory(data) {
      this.$router.push({
        path: "tag",
        query: { id: data.subject_id,directory_id:data.id },
      });
    },
  },
};
</script>

<style scoped>
.color {
  color: #66b1ff;
}
</style>
